fix(ui): add a shared bg-surface-code token for the always-dark code surface by galuis116 · Pull Request #6957 · JSONbored/loopover

galuis116 · 2026-07-17T15:33:38Z

Summary

The always-dark code-surface color oklch(0.13 0.005 260) was copy-pasted verbatim across 4 call sites in 3 unrelated files (control-primitives.tsx's DiffBlock, maintainer-panel.tsx's comment preview, and try-it.tsx's request/response blocks), with no shared token naming it.
Adds --surface-code to packages/loopover-ui-kit/src/theme.css, mapped through @theme inline as --color-surface-code so Tailwind generates a bg-surface-code utility. Defined only in :root, deliberately not redefined inside .dark, so it renders identically regardless of the active theme (matching its "always-dark" intent).
Migrated all 4 call sites from the raw bg-[oklch(0.13_0.005_260)] arbitrary value to bg-surface-code.

Test plan

apps/loopover-ui/src/components/site/surface-code-token.test.ts (new): asserts the token is defined once in theme.css and mapped through @theme inline, asserts it is not redefined inside the .dark block, and asserts each of the 3 call sites uses bg-surface-code with no raw oklch(0.13...) literal remaining.
npm run ui:typecheck — clean
npm run ui:lint — clean (0 errors)
npm --workspace @loopover/ui run test — all existing suites pass, including the touched components' existing tests (maintainer-panel.test.tsx, try-it.test.ts)

This is a pure visual no-op (same computed color, same theme behavior) — no UI screenshot included since nothing renders differently before/after.

Closes #6820

…surface The oklch(0.13 0.005 260) code-surface color was copy-pasted across 4 call sites in DiffBlock, the maintainer-panel comment preview, and try-it's request/response blocks with no shared token. Adds --surface-code to theme.css (deliberately not redefined in .dark, so it stays identical across themes) and migrates all 4 sites to the new bg-surface-code utility.

superagent-security · 2026-07-17T15:34:02Z

Superagent didn't find any vulnerabilities or security issues in this PR.

loopover-orb · 2026-07-17T15:38:08Z

Tip

✅ LoopOver review result - approve/merge recommended

_{Review updated: 2026-07-17 15:38:37 UTC}

5 files · 1 AI reviewer · no blockers · readiness 98/100 · CI green · clean

✅ Suggested Action - Approve/Merge

safe to merge

Review summary
This PR extracts a hardcoded oklch(0.13 0.005 260) color, duplicated across 4 call sites in 3 files, into a shared --surface-code token defined once in theme.css and mapped through @theme inline to generate the bg-surface-code utility. The change is a correct, well-scoped pure-CSS-variable refactor: it's deliberately only defined in :root (not .dark) to preserve the always-dark intent, all 4 call sites are updated consistently, and a new test locks in both the token definition and its exclusive use. This closes #6820 and CI passed on all validation gates.

Nits — 4 non-blocking

surface-code-token.test.ts uses a relative path ("../../packages/loopover-ui-kit/src/theme.css") which is fragile if the test runner's cwd changes; consider resolving via import.meta.url or a workspace alias.
The .dark-block extraction in the test (css.indexOf("\n}", darkBlockStart)) assumes theme.css formatting won't change (e.g., nested braces before the closing brace) — a minor brittleness worth a comment.
Consider adding a short comment in theme.css itself noting where the token is consumed (control-primitives, maintainer-panel, try-it) for future maintainers, mirroring the test's citation of Same raw oklch(0.13 0.005 260) background color duplicated across 4 unrelated files with no shared token #6820.
apps/loopover-ui/src/components/site/app-panels/maintainer-panel.tsx is already large (~861 lines); unrelated to this PR, but worth flagging for a future split.

Decision drivers

✅ Code review — No blockers (1 reviewer)
✅ Gate result — Passing (No configured blocker found.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#6820
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low review scope from cached public metadata (1 linked issue).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 1952 registered-repo PR(s), 1282 merged, 52 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	galuis116; Gittensor profile; 1952 PR(s), 52 issue(s).
Improvement	✅ Minor	risk: clean · value: minor · LLM: minor

Linked issue satisfaction

Addressed
The PR adds a --surface-code token in theme.css mapped through @theme inline to bg-surface-code, and migrates all 4 call sites (control-primitives.tsx, maintainer-panel.tsx, try-it.tsx x2) from the raw oklch literal to the new utility class, matching both deliverables.

Review context

Author: galuis116
Role context: outside_contributor
Public audience mode: oss maintainer
Lane context: Repository is configured for direct PR review.
Public profile languages: JavaScript, Python, Dart, TypeScript, HTML, MDX, Rust, C++
Official Gittensor activity: 1952 PR(s), 52 issue(s).
PR-specific overlap: none found.

Contributor next steps

Keep the PR focused and include validation evidence before maintainer review.

Signal definitions

Related work = same linked issue, overlapping active PRs, or title/path similarity.
Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

@loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
@loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
`/`	desktop	_{before /}	_{after /}	—
`/`	mobile	_{before / (mobile)}	_{after / (mobile)}	—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

Re-run LoopOver review

loopover-orb

LoopOver approves — the gate is satisfied and CI is green.

galuis116 requested a review from JSONbored as a code owner July 17, 2026 15:33

github-actions Bot deployed to preview/pr-6957 July 17, 2026 15:35 View deployment

loopover-orb Bot added the gittensor:bug Gittensor-scored bug fix — scores a 0.05x multiplier. label Jul 17, 2026

loopover-orb Bot assigned galuis116 Jul 17, 2026

loopover-orb Bot approved these changes Jul 17, 2026

View reviewed changes

loopover-orb Bot merged commit 334ee58 into JSONbored:main Jul 17, 2026
9 checks passed

JSONbored mentioned this pull request Jul 17, 2026

chore(release): cut ui-kit v1.1.0 #7002

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): add a shared bg-surface-code token for the always-dark code surface#6957

fix(ui): add a shared bg-surface-code token for the always-dark code surface#6957
loopover-orb[bot] merged 1 commit into
JSONbored:mainfrom
galuis116:fix/surface-code-token

galuis116 commented Jul 17, 2026

Uh oh!

superagent-security Bot commented Jul 17, 2026

Uh oh!

loopover-orb Bot commented Jul 17, 2026 •

edited

Loading

✅ LoopOver review result - approve/merge recommended

Uh oh!

loopover-orb Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

galuis116 commented Jul 17, 2026

Summary

Test plan

Uh oh!

superagent-security Bot commented Jul 17, 2026

Uh oh!

loopover-orb Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ LoopOver review result - approve/merge recommended

Uh oh!

loopover-orb Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

loopover-orb Bot commented Jul 17, 2026 •

edited

Loading